<template>
  <div class="gongju">
    <div class="header">
      <div class="tab-wrap">
        <span
          @click="tabChange(index)"
          :class="{ active: activeIndex == index }"
          v-for="(item, index) in tabData"
          :key="index"
          >{{ item.name }}</span
        >
      </div>
    </div>
    <van-empty
      class="zanwushuju"
      :image-size="[240, 180]"
      image="https://wap.lexuemiao.com/img/noData2.ec86a21a.png"
      description="暂无数据"
    />
  </div>
</template>

<script>
import { toRefs, reactive, onMounted } from 'vue'
export default {
  setup(props) {
    const data = reactive({
      tabData: [{ name: '学习工具' }, { name: '正在参与' }],
      activeIndex: 0
    })
    const tabChange = (i) => {
      data.activeIndex = i
    }

    return {
      ...toRefs(data),
      tabChange
    }
  }
}
</script>
<style lang="scss" scoped>
.gongju {
  height: 100vh;
  .header {
    // background-color: antiquewhite;

    height: 400px;
    background: url('https://wap.lexuemiao.com/img/toolBg.361a07fa.png')
      no-repeat;
    background-size: 100% 100%;
    padding: 0 20px;
    box-sizing: border-box;
    position: relative;
    .tab-wrap {
      width: 96%;
      position: absolute;
      bottom: 10px;
      display: flex;
      justify-content: space-around;
      font-size: 16px;
      font-weight: 600;
      background-color: #fff;
      border-radius: 50px;

      height: 74px;
      display: flex;
      align-items: center;
      span {
        border-bottom: 6px solid transparent;
      }
      .active {
        border-bottom: 6px solid #f15a24;
      }
    }
  }
  .zanwushuju {
    margin-top: 100px;
  }
}
</style>
